<template>
  <div class="CheckRulesbox">
    <div class="leftbox">
      <TreeBox @handleNodeClick="handleNodeClick" @deletelist="treedeletelist"></TreeBox>
    </div>
    <div class="rightbox">
      <div class="tipbox">
        <div class="leftspan">
          <span>规则名称</span>
          <span>
            <el-input v-model="ruleName" size="small" placeholder="请输入分组名称"></el-input>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重置</el-button>
          <el-button type="primary" size="small" @click="gettablelist">查询</el-button>
        </div>
      </div>
      <div class="bodybox">
        <div class="title">
          <div>检查规则</div>
          <div class="butexp">
            <el-button class="moban"  type="primary" size="small" @click="dialogVisible=true"><i class="el-icon-plus" ></i> 新增规则</el-button>
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="table">
          <TableColumn
            ref="tabledata"
            :tableData="tableData" 
            :tableConfig="tableConfig" 
            :issize="issize">
            <el-table-column
              label="状态"
              width="90"
              align="center">
              <template #default="{row}">
                <span :style="{'background-color':+row.ruleStatus?'#b8e412':'#ff0000'}" class="status">
                  {{ +row.ruleStatus?'启用':'停用' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <template #default="{row}">
                <span>
                  <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                    <i @click="bianji(row,'look')" class="el-icon-view" style="color: #1a90fe;cursor: pointer;"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <i @click="bianji(row)" class="el-icon-edit" style="color: #1a90fe;cursor: pointer;margin-left: 10px;"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <i @click="deletelist(row)" class="el-icon-delete" style="color: red;cursor: pointer;margin-left: 10px;"></i>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="page.pageNo"
            :page-size="20"
            @current-change="gettablelist"
            :total="+totalCount">
          </el-pagination>
        </div>
      </div>
      <div class="dialog">
        <el-dialog
          title="规则信息"
          :visible.sync="dialogVisible"
          width="45%">
          <div>
            <el-form ref="form" :model="form" label-width="100px" >
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="规则编码">
                    <el-input v-model="form.ruleCode" size="small" placeholder="请输入规则编码" :disabled="isflag"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="规则名称">
                    <el-input v-model="form.ruleName" size="small" placeholder="请输入规则名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="规则说明">
                    <el-input v-model="form.ruleExplain" size="small" type="textarea" :rows="3" placeholder="请输入规则说明"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="规则分组">
                    <el-select v-model="form.ruleGroup" placeholder="请选择规则分组" size="small" style="width: 100%;">
                      <el-option v-for="item in option" :key="item.groupCode" :label="item.groupName" :value="item.groupCode"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="规则类型">
                    <el-select v-model="form.ruleType" placeholder="请选择规则类型" size="small" style="width: 100%;">
                        <el-option label="数据库规则" value="1"></el-option>
                        <el-option label="脚本规则" value="2"></el-option>
                        <el-option label="自定义规则" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="规则定义">
                    <el-input type="textarea" v-model="form.ruleLogic"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="前置条件">
                    <el-input v-model="form.preCondition" size="small" placeholder="请输入前置条件"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="检查结果类型">
                    <el-select v-model="form.resultType" placeholder="请选择检查结果类型" size="small" style="width: 100%;">
                        <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创建时间">
                    <el-date-picker  size="small" v-model="form.createTime"  type="date" value-format="yyyy-MM-dd" style="width: 100%;" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="规则状态">
                    <el-radio-group v-model="form.ruleStatus">
                      <el-radio label="1">启用</el-radio>
                      <el-radio label="0">停用</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao" size="small">取 消</el-button>
            <el-button type="primary" @click="submit" size="small" v-show="isshow">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getguizelistapi, postdelguizeapi, postaddguizeapi ,postupdateguizeapi} from '@/api/system/CheckRules'
import {getzidianxialaapi} from '@/api/guidelines'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import TreeBox from './TreeBox.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn,
    TreeBox,
    TopTile
  },
  data() {
    return {
      form:{},
      ruleName: '',
      dialogVisible:false,
      issize:'medium',
      tableData: [],
      options:[],
      tableConfig: [
        { label: '序号', type: 'index',width:'70' ,center: 'center'},
        {label:'规则编码',prop:'ruleCode'},
        {label:'规则名称',prop:'ruleName' },
        {label:'规则分组',prop:'ruleGroup' },
        {label:'规则类型',prop:'ruleType' ,
          formatter: (row, column, cellValue, index) => {
            return row.ruleType=='1'?'数据库规则':row.ruleType=='2'?'脚本规则':'自定义规则'
          }
        },
        {label:'逻辑定义',prop:'ruleLogic' ,showtooltip:true},
        {label:'前置条件',prop:'preCondition' ,showtooltip:true},
        {label:'检查结果类型',prop:'resultType' },
        {label:'创建时间',prop:'createTime' },
      ],
      totalCount: '',
      page: {
        pageNo: 1,
        pageSize:20
      },
      treedata:{},
      option: [],
      isflag: false,
      isshow:true
    };
  },

  async mounted() {
    const { data: { list } } = await getzidianxialaapi({ dictType: 'JCJGLX ' })
    this.options=list
  },

  methods: {
    //规则新增/修改
    submit() {
      this.isflag ? postupdateguizeapi(this.form).then(res => {
        this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'修改成功':res.message
         })
      }) :
        postaddguizeapi(this.form).then(res => {
        this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'新增成功':res.message
         })
      })
      this.quxiao()
      this.gettablelist()
    },
    // 弹窗取消
    quxiao(){
      this.dialogVisible = false
    },
    // 树节点点击
    handleNodeClick(val,data) {
      this.treedata = val
      this.option=data
      this.gettablelist()
    },
    // 获取表格数据
    async gettablelist() {
      if (!this.treedata.groupCode) return this.$message.warning('请先选择分组信息')
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getguizelistapi({
        pageNo:this.page.pageNo-1,pageSize:this.page.pageSize,groupCode:this.treedata.groupCode,ruleName:this.ruleName
      })
      this.totalCount = totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 编辑
    bianji(row, val) {
      if (val == 'look') {
        this.isshow=false
      }
      this.isflag=true
      this.dialogVisible=true
      this.form={...row}
    },
    // 删除分组
    deletelist(row) {
      this.$confirm('此操作将删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postdelguizeapi(row.ruleCode).then(res => {
            this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.code=='200'?'删除成功':res.message
            })
          })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除当前所选分组后清空表格
    treedeletelist() {
      this.totalCount = ''
      this.tableData=[]
    },
    // 重置
    chongzhi() {
      this.ruleName = ''
      this.gettablelist()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('sst-microservice-biz/sst/check/rules/set/export',{
        pageNo:this.page.pageNo-1,pageSize:this.page.pageSize,groupCode:this.treedata.groupCode,ruleName:this.ruleName
      },'检查规则')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.form={}
        this.isflag = false
        this.isshow=false
      }
    }
  }
};
</script>

<style scoped>
.CheckRulesbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .tipbox{
      height: 80px;
      background-color: #fff;
      line-height: 80px;
      padding: 0 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .leftspan{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #606266;
        span{
          margin-right: 15px;
        }
      }
    }
    .bodybox{
      height: calc(100% - 90px);
      padding: 20px;
      background-color: #fff;
      .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
          .butexp{
            display: flex;
            .moban{margin-right: 10px;}
          }
      }
      .table{
        height: 88%;
        .status{
            color: #fff;
            padding: 5px;
            display: block;
            border-radius: 5px;
          }
      }
      .fenye{
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}

::v-deep .el-dialog__footer{
  text-align: center;
}
</style>